<!--
 * @description: 编辑班次
 * @Author: Coder
 * @Date: 2020-01-19 10:59:02
 * @LastEditors: Coder
 -->
<template>
  <div>
    <!-- 班次弹出框 -->
    <a-modal destroyOnClose :width="800" title="添加班次" v-model="visible" @ok="handleOk">
      <a-form :form="form">
        <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="班次名称">
          <a-input
            style="width: 249px"
            v-decorator="[
              'name',
              {
                initialValue: attendShiftList.name,
                rules: [
                  {
                    required: true,
                    message: '名称由1~8个中文、英文、数字组成'
                  }
                ]
              }
            ]"
            placeholder="例如'早班', 不能超过8个字符"
          />
        </a-form-item>
        <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="打卡时间">
          <div v-for="(freeTime, f) in attendShiftList.attendPeriodList" :key="f">
            <div>
              上班
              <a-time-picker v-model="freeTime.startPeriod" format="HH:mm" />
              — 下班
              <a-time-picker v-model="freeTime.endPeriod" format="HH:mm" />
              <span
                class="mg_l10 cursor tc-theme"
                v-if="attendShiftList.attendPeriodList.length > 1"
                @click="deleteNewFreeTime(f, attendShiftList.attendPeriodList)"
                >删除</span
              >
              <span
                v-if="attendShiftList.attendPeriodList.length <= 3 && f == currentIndex"
                class="mg_l10 cursor tc-theme"
                @click="addNewFreeTime(attendShiftList.attendPeriodList)"
                >新增时段</span
              >
            </div>
            <div v-if="attendShiftList.attendPeriodList.length == 1">
              <a-checkbox>休息时间</a-checkbox>
              <span class="sub_tit">休息时间内不计算工作时长</span>
              <div>
                开始
                <a-time-picker v-model="attendShiftList.resetPeriod.startPeriod" format="HH:mm" />

                — 结束
                <a-time-picker v-model="attendShiftList.resetPeriod.endPeriod" format="HH:mm" />
              </div>
            </div>
          </div>
        </a-form-item>
        <a-checkbox v-model="attendShiftList.isAdvanc">高级设置</a-checkbox>
        <template v-if="attendShiftList.isAdvanc">
          <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="弹性时间">
            <!-- 允许迟到早退 -->
            <a-checkbox v-model="attendShiftList.isAllowedLateEarly">
              允许迟到早退
            </a-checkbox>
            <div v-if="attendShiftList.isAllowedLateEarly">
              <span class="sub_tit mg_r10">上班允许迟到</span>
              <a-select v-model="attendShiftList.lateMinute" style="width: 120px">
                <a-select-option v-for="item in away" :value="item.key" :key="item.key">
                  {{ item.value }}
                </a-select-option>
              </a-select>
              <span class="sub_tit mg_r10 mg_l10">, 下班允许早退</span>
              <a-select v-model="attendShiftList.earlyMinute" style="width: 120px">
                <a-select-option v-for="item in away" :value="item.key" :key="item.key">
                  {{ item.value }}
                </a-select-option>
              </a-select>
            </div>
            <!-- 允许晚走晚到 -->
            <div>
              <a-checkbox v-model="attendShiftList.isAllowLateLate">
                允许晚走晚到
              </a-checkbox>
            </div>
            <div v-if="attendShiftList.isAllowLateLate">
              <span class="sub_tit mg_r10">下班晚走</span>
              <a-select v-model="attendShiftList.offWorkLateMinute" style="width: 120px">
                <a-select-option v-for="item in away" :value="item.key" :key="item.key">
                  {{ item.value }}
                </a-select-option>
              </a-select>
              <span class="sub_tit mg_r10 mg_l10">，次日可晚到</span>
              <a-select v-model="attendShiftList.onWorkLateMinute" style="width: 120px">
                <a-select-option v-for="item in away" :value="item.key" :key="item.key">
                  {{ item.value }}
                </a-select-option>
              </a-select>
            </div>
          </a-form-item>
          <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="打卡时间限制">
            <a-select v-model="attendShiftList.earliestPunchTime" style="width: 120px">
              <a-select-option v-for="item in contralTime" :value="item.key" :key="item.key">{{ item.value }}</a-select-option>
            </a-select>
            <span class="sub_tit mg_l10 mg_r10">可打上班卡，</span>
            <a-select v-model="attendShiftList.latestPunchTime" style="width: 120px">
              <a-select-option v-for="item in contralTime" :value="item.key" :key="item.key">{{ item.value }}</a-select-option>
            </a-select>
            <span class="sub_tit mg_r10 mg_l10">可打下班卡</span>
          </a-form-item>
          <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="下班">
            <a-checkbox v-model="attendShiftList.afterWorkNeedPunch">
              下班不需要打卡
            </a-checkbox>
          </a-form-item>
        </template>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: "Shifts",

  props: {
    shiftsOptions: {
      show: true,
      editorType: false,
      obj: {}
    }
  },
  data() {
    return {
      currentIndex: 0,
      editorType: false,
      visible: false,
      form: this.$form.createForm(this, { name: "addFreeName1" }),
      attendShiftList: {
        isAdvanc: false,
        afterWorkNeedPunch: false, // 下班是否需要打卡 : 1-是,0-否
        attendPlanId: "", // 考勤方案ID
        earliestPunchTime: 480, // 最早上班打卡时间(分钟)
        earlyMinute: 0, // 下班允许早退(分钟)
        isAllowLateLate: false, // 允许晚走晚到 : 1-允许,0-不允许
        isAllowedLateEarly: false, // 允许迟到早退 : 1-允许,0-不允许
        lateMinute: 0, // 上班允许迟到(分钟)
        latestPunchTime: 480, // 最晚下班打卡时间(分钟)
        name: "", // 班次名称
        offWorkLateMinute: 0, // 下班晚走(分钟)
        onWorkLateMinute: 0, // 上班晚到(分钟)
        periodJson: "", // 打卡时段JSON
        attendPeriodList: [
          {
            endPeriod: this.moment("00:00", "HH:mm"),
            startPeriod: this.moment("00:00", "HH:mm"),
            sort: 0,
            type: 1
          }
        ],
        resetPeriod: {
          endPeriod: this.moment("00:00", "HH:mm"), // 结束时段
          startPeriod: this.moment("00:00", "HH:mm"), // 开始时段
          type: 2,
          sort: 0
        }
      }
    };
  },

  watch: {
    shiftsOptions: {
      handler(val) {
        this.visible = val.show;
        this.editorType = val.editorType;
        if (val.editorType) {
          this.attendShiftList = val.obj;
        } else {
          this.attendShiftList = {
            isAdvanc: false,
            afterWorkNeedPunch: false, // 下班是否需要打卡 : 1-是,0-否
            attendPlanId: "", // 考勤方案ID
            earliestPunchTime: 480, // 最早上班打卡时间(分钟)
            earlyMinute: 0, // 下班允许早退(分钟)
            isAllowLateLate: false, // 允许晚走晚到 : 1-允许,0-不允许
            isAllowedLateEarly: false, // 允许迟到早退 : 1-允许,0-不允许
            lateMinute: 0, // 上班允许迟到(分钟)
            latestPunchTime: 480, // 最晚下班打卡时间(分钟)
            name: "", // 班次名称
            offWorkLateMinute: 0, // 下班晚走(分钟)
            onWorkLateMinute: 0, // 上班晚到(分钟)
            periodJson: "", // 打卡时段JSON
            attendPeriodList: [
              {
                endPeriod: this.moment("00:00", "HH:mm"),
                startPeriod: this.moment("00:00", "HH:mm"),
                sort: 0,
                type: 1
              }
            ],
            resetPeriod: {
              endPeriod: this.moment("00:00", "HH:mm"), // 结束时段
              startPeriod: this.moment("00:00", "HH:mm"), // 开始时段
              type: 2,
              sort: 0
            }
          };
        }
      }
    }
  },
  computed: {
    away() {
      let i = 0;
      const awayBox = [];
      while (i <= 60) {
        awayBox.push({
          value: `${i}分钟`,
          key: i
        });
        i += 15;
      }
      return awayBox;
    },
    contralTime() {
      let i = 480;
      const contralTimeBox = [];
      while (i >= 0) {
        contralTimeBox.push({
          value: `${i / 60}小时内`,
          key: i
        });
        i -= 30;
      }
      return contralTimeBox;
    }
  },
  methods: {
    /* 新增时段 */
    addNewFreeTime(arr) {
      this.currentIndex = arr.length;
      let i = 1;
      arr.push({
        startPeriod: this.moment("00:00", "HH:mm"),
        endPeriod: this.moment("00:00", "HH:mm"),
        type: 1,
        sort: i++
      });
    },
    /* 删除时段 */
    deleteNewFreeTime(i, arr) {
      this.currentIndex = arr.length - 2;
      return this.attendShiftList.attendPeriodList.splice(i, 1);
    },
    editorItem() {},
    /* 删除 */
    deleteItem(item, arr) {},
    /* 添加班次 */
    handleOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.attendShiftList.name = values.name;
          if (this.editorType) {
            this.$parent.editorData.attendShiftList.filter(val => {
              if (val.name === this.attendShiftList.name) {
                return (val = this.attendShiftList);
              }
            });
          } else {
            this.$parent.editorData.attendShiftList.push(this.attendShiftList);
          }

          this.visible = false;
        }
      });
    }
  }
};
</script>
